.banner {
  $anim-time = 800ms;
  position: relative;
  height: 22rem;
  &:hover ul.monitor { opacity: 1; }
  ul {
    margin: 0;
    padding: 0;
    li {
      display: inline-block;
      list-style-type: none;
    }
    &.content {
      overflow: hidden;
    }
    &.content li {
      position: absolute;
      opacity: 0;
      transition: opacity ($anim-time/2) ease-in-out;
      &.onshow {
        opacity: 1;
        transition-delay: ($anim-time/2);
      }
      img { width: 100%; height: 22rem; }
    }
    &.monitor {
      position: absolute;
      bottom: 3%;
      width: 100%;
      text-align: center;
      opacity: 0;
      transition: opacity $anim-time ease-in-out;
      li {
        margin: 0 .5rem;
        width: 1.5rem;
        height: .4rem;
        border-radius: .25rem;
        background: white;
        cursor: pointer;
        transition: all $anim-time ease-in-out;
        &.onshow { background: rgba(255, 255, 255, 0.5); }
      }
    }
  }
}
